<template>
  <!-- 关联图片列表开始 -->
  <el-row v-if="enabledEditImage" align="middle" class="align-items">
    <el-col :span="12">
      <div  class="mediatitle">
        图片介质
        <span class="ml10" v-if="dataInfo.thumbs && dataInfo.thumbs.length > 0">({{dataInfo.thumbs.length}})</span>
      </div>
    </el-col>
    <el-col :span="12">
      <div align="right" v-if="currentCorpid == dataInfo.corpid">
        <!--<el-button type="primary" size="mini" v-if="!iseditImage" @click="handleUpdateImage">
          <el-icon>
            <edit />
          </el-icon>
          编辑
        </el-button>
        <el-button type="default" size="mini" v-else @click="handleCancelUpdateImage">取消编辑</el-button>-->
      </div>
    </el-col>
    <el-col :span="24">
      <div>
        <ul class="imglist">
          <li v-for="(img, index) in dataInfo.thumbs" :key="img.relid">
            <el-image :src="img.isself == 1 ? img.viewurl+ '&width=160px' : img.viewurl" :preview-src-list="mediaImageSrc"
                      :initial-index="index" fit="scale-down" style="width:160px;height:160px"/>
            <a class="delete-image" href="javascript:;" @click="handleDeleteRlImage(img)" v-if="currentCorpid === dataInfo.corpid && iseditImage">
              <el-icon><circle-close/></el-icon>
            </a>
            <a class="edit-image" href="javascript:;" @click="handleEditRelImage(img)" v-if="currentCorpid === dataInfo.corpid && iseditImage">编辑</a>
          </li>
          <li class="imgplus" @click="handleRelImages" v-if="currentCorpid === dataInfo.corpid && iseditImage">
            <div>
              <el-icon>
                <plus />
              </el-icon>
              <p style="color:#999">关联图片</p>
            </div>
          </li>
          <el-col :span="24" v-else-if="dataInfo.thumbs && dataInfo.thumbs.length<=0">
            <el-empty :image-size="100"/>
          </el-col>
        </ul>
      </div>
    </el-col>

  </el-row>
  <el-row v-else>
    <el-col :span="24">
      <div  class="mediatitle">
        图片介质
        <span v-if="dataInfo.thumbs && dataInfo.thumbs.length > 0">({{dataInfo.thumbs.length}})</span>
      </div>
    </el-col>
    <el-col :span="24">
      <div>
        <ul class="imglist">
          <li v-for="(img, index) in dataInfo.thumbs" :key="img.relid">
            <el-image
                    :src="img.isself == 1 ? img.viewurl+ '&width=160px' : img.viewurl"
                    :preview-src-list="mediaImageSrc"
                    :initial-index="index"
                    fit="scale-down"
                    style="width:160px;height:160px"
            />
            <a class="delete-image" href="javascript:;" @click="handleDeleteRlImage(img)" v-if="currentCorpid === dataInfo.corpid">
              <el-icon><circle-close/></el-icon>
            </a>
            <a class="edit-image" href="javascript:;" @click="handleEditRelImage(img)" v-if="currentCorpid === dataInfo.corpid">编辑</a>
          </li>
          <li class="imgplus" @click="handleRelImages" v-if="currentCorpid === dataInfo.corpid">
            <div>
              <el-icon>
                <plus />
              </el-icon>
              <p style="color:#999">关联图片</p>
            </div>
          </li>
          <el-col :span="24" v-else-if="dataInfo.thumbs && dataInfo.thumbs.length<=0">
            <el-empty :image-size="100"/>
          </el-col>
        </ul>
      </div>
    </el-col>

  </el-row>
  <!-- 关联图片列表结束 -->
  <!-- 关联图片介质开始 -->
  <rel-image-medium
    ref="relImageMediumRef"
    :dialog-rel-image-form-data="dialogRelImageFormData"
    :dialog-rel-image-visible="dialogRelImageVisible"
    :dialog-rel-image-title="dialogRelImageTitle"
    :dialog-rel-image-media-type="relType"
    @handleCancelRelImageDialog="handleCancelRelImageDialog"
    @reloadMediaData="reloadMediaData"
    @handleVideoPlay="handleVideoPlay"
  />
  <!-- 关联图片介质结束 -->
</template>

<script>
  import {CircleClose, Plus} from "@element-plus/icons"
  import {nextTick, reactive, ref, toRef} from 'vue'
  import RelImageMedium from "../Medium/RelImageMedium";
  import {ElMessage, ElMessageBox} from 'element-plus'
  import {editMediaRefImageSort, deleteMediaRefImage, editSeriesRelImageSort, deleteSeriesRelImage} from "@/api/media/media";

  export default {
    name: "ImageMedium",
    components: {CircleClose, Plus, RelImageMedium},
    props: {
      currentCorpid: {
        type: Number,
        required: true
      },
      relType: {
        type: String,
        default: 'media'
      },
      dataInfo: {
        type: Object,
        required: true
      },
      enabledEditImage: {
        type: Boolean,
        default: false
      },
      isedit: {
        type: Boolean,
        default: true
      }
    },
    emits: ['handleVideoPlay', 'reloadMediaData'],
    setup(props, context) {
      const dialogRelImageVisible = ref(false)
      const dialogRelImageTitle = ref('')
      const dialogRelImageFormData = reactive({
        mediaid: undefined,
        seriesid: undefined,
        groupid: undefined,
        datas: []
      })
      const relImageMediumRef = ref(null)
      const mediaImageSrc = ref([])
      const iseditImage = toRef(props, 'isedit')

      const handleRelImages = () => {
        dialogRelImageFormData.groupid = props.dataInfo.groupid
        if (props.relType == 'media') {
          dialogRelImageFormData.mediaid = props.dataInfo.mediaid
          dialogRelImageFormData.seriesid = undefined
          dialogRelImageTitle.value = '媒资节目集 ' + props.dataInfo.name + ' 关联图片介质'
        } else {
          dialogRelImageFormData.mediaid = undefined
          dialogRelImageFormData.seriesid = props.dataInfo.seriesid
          dialogRelImageTitle.value = '媒资子集 ' + props.dataInfo.name + ' 关联图片介质'
        }
        dialogRelImageFormData.datas = []

        dialogRelImageVisible.value = true
        nextTick(() => {
          relImageMediumRef.value.init()
        })
      }
      const handleDeleteRlImage = (img) => {
        const tipTitle = props.relType == 'media' ? '节目集' : '子集'
        ElMessageBox.confirm('确定要删除图片 ' + img.name + ' 吗？', '删除媒资'+tipTitle+'和图片的关联关系', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (props.relType == 'media') {
            deleteMediaRefImage({mediaid: props.dataInfo.mediaid, imgid: img.imgid}).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                context.emit('reloadMediaData')
              }
            })
          } else {
            deleteSeriesRelImage({seriesid: props.dataInfo.seriesid, imgid: img.imgid}).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                context.emit('reloadMediaData')
              }
            })
          }
        }).catch(() => {})
      }
      const handleEditRelImage = (img) => {
        const tipTitle = props.relType == 'media' ? '节目集' : '子集'
        ElMessageBox.prompt('编辑'+ tipTitle +'图片 ' + img.name + ' 排序', '编辑'+ tipTitle +'图片排序', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          inputPlaceholder: '请输入'+ tipTitle +'图片排序序号',
          inputValue: img.relsort,
          inputPattern: /\d/,
          inputErrorMessage: '只能输入数字'
        }).then((value) => {
          if (props.relType == 'media') {
            editMediaRefImageSort({relid: img.relid, sort: value.value}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              context.emit('reloadMediaData')
            })
          } else {
            editSeriesRelImageSort({relid: img.relid, sort: value.value}).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              context.emit('reloadMediaData')
            })
          }
        }).catch(() => {})
      }
      const handleCancelRelImageDialog = () => {
        dialogRelImageVisible.value = false
      }
      const reloadMediaData = () => {
        context.emit('reloadMediaData')
      }
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      const handleUpdateImage = () => {
        iseditImage.value = true
      }
      const handleCancelUpdateImage = () => {
        iseditImage.value = false
      }
      const init = () => {
        mediaImageSrc.value = []
        if (props.dataInfo.thumbs && props.dataInfo.thumbs.length > 0) {
          props.dataInfo.thumbs.forEach(thumb => {
            mediaImageSrc.value.push(thumb.viewurl)
          })
        }
      }
      init()
      return {
        handleRelImages,
        handleEditRelImage,
        handleDeleteRlImage,
        dialogRelImageVisible,
        dialogRelImageTitle,
        dialogRelImageFormData,
        handleCancelRelImageDialog,
        reloadMediaData,
        handleVideoPlay,
        relImageMediumRef,
        mediaImageSrc,
        iseditImage,
        handleUpdateImage,
        handleCancelUpdateImage,
        init
      }
    }
  }
</script>
<style scoped>
  .el-empty{
    --el-empty-padding:10px 0;
  }
</style>
<style lang="scss">
  .imglist{
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 160px;
      margin-right: 15px;
      margin-bottom:10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border:1px solid rgba(153,153,153,0.4);
      .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
      };
      .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
          font-size:20px;
        }
      }
    }
    li.imgplus{
      >div{text-align: center;}
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items: center;
      width: 160px;
      height: 160px;
      overflow: hidden;
      border: 1px dashed rgba(153,153,153,0.4);
      background: rgba(222,222,222,0.4); cursor: pointer;
      .el-icon{font-size: 50px;color:#999;}
    }
    li:nth-child(6n){margin-right:0;}
  }
  .mediatitle{
    margin-top: 10px;
    &:first{
      margin-top: 0;
    }
    display:inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }
  @media screen and (max-width:1350px) {
    .imglist{
      li:nth-child(6n){margin-right:15px;}
    }
  }
  @media screen and (max-width:1200px) and (min-width: 1181px) {
    .imglist{
      li:nth-child(5n){margin-right:0;}
    }
  }
</style>
